/**
 * ExpenseAdjunctList :: Invoice | Annex |  Business
 */
import React, { Component } from 'react';
import 'styles/expense/expense-adjunct-detail.scss';
import Invoice from './invoice';
import Business from './business';
import { Annex } from '../component/func-component';
import Annotate from 'components/template/annotate';
import ExpenseService from '../expense-service';
import { connect } from 'react-redux';

@connect(mapStateToProps)
class ExpenseAdjunctDetail extends Component {

  static contextTypes = {
    currentExpense: React.PropTypes.object,
    isWaitForAudit: React.PropTypes.bool
  };

  component = {
    invoice: Invoice,
    attachment: Annex,
    business: Business
  };

  getProps = () => {
    const { currentFlag, receiptChanges, currentAdjunct: { id }, receiptLabelsDesc, onInvoiceChange } = this.props;
    if (currentFlag === 'invoice') {
      return {
        receiptChanges: receiptChanges[id] || {},
        receiptLabelsDesc: receiptLabelsDesc[id] || {},
        invoiceBase: [
          ['billingTime', 'billingCode', 'billingNo', 'deviceNumber', 'checkCode', 'receiptOwner', 'showUserInfo', 'cardsignType', 'idCardNo', 'internalStaff', 'agentTag', 'domesticPassengers', 'tollType', 'remark'],
          ['title', 'payee', 'draweeNo', 'payeeNo', 'draweeAddressPhone', 'payeeAddressPhone', 'draweeBankAccount', 'payeeBankAccount'],
        ],
        onInvoiceChange: onInvoiceChange
      };
    }
  };
  render() {
    const { currentAdjunct = {}, currentFlag, handleShowLess, annotates, loginUser, randomHash, isEditing } = this.props;
    const { currentExpense, currentExpense: { id }, isWaitForAudit } = this.context;
    return (
      <section className="adjunct-detail animated fadeIn">
        <Annotate
          key={currentAdjunct.id}
          params={{
            typeName: 'INVOICE',
            entityID: id,
            target: {
              type: currentFlag === 'business' ? 'bankCard' : currentFlag,
              key: currentFlag === 'attachment' ? void 0 : currentAdjunct.id
            }
          }}
          disabled={!isWaitForAudit}
          annotateList={ExpenseService.getAnnotateList(currentFlag === 'attachment' ? currentFlag : currentAdjunct.id, annotates, loginUser)}
          onChange={this.props.refreshAnnotate}
          iconStyle={{
            top: '18px',
          }}
        >
          <div>
            {
              React.createElement(this.component[currentFlag], {
                isDetail: true,
                currentAdjunct,
                handleShowLess,
                currentExpense,
                randomHash,
                isEditing,
                ...this.getProps(currentFlag)
              })
            }
          </div>
        </Annotate>
      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    currentExpense: state.expense.currentExpense,
    loginUser: state.login.loginUser
  };
}

ExpenseAdjunctDetail.propTypes = {};

export default ExpenseAdjunctDetail;
